<template>
  <div>
    <div> 常见几何体</div>
    <div ref="webgl" id="webgl" style="width: 800px; height: 500px"></div>
  </div>
</template>
<script lang="ts" setup>
  import * as THREE from 'three';
  import { OrbitControls } from 'three/addons';
  import { onMounted, ref } from 'vue';

  const webgl: any = ref(null);
  onMounted(() => {
    init();
  });

  function init() {
    const scene = new THREE.Scene();
    const width = 800;
    const height = 500;
    const camera = new THREE.PerspectiveCamera(30, width / height, 1, 10000);
    camera.position.set(-100, 300, 300);
    camera.lookAt(scene.position);
    const render = new THREE.WebGLRenderer();
    render.setSize(width, height);
    // console.log(' webgl.value', webgl.value);
    webgl.value.appendChild(render.domElement);
    // document.body.appendChild(render.domElement);
    new OrbitControls(camera, render.domElement);
    const amLight = new THREE.AmbientLight(0xffffff);
    scene.add(amLight);
    const helper = new THREE.AxesHelper(200);
    scene.add(helper);

    //材质对象Material
    const material = new THREE.MeshLambertMaterial({
      color: 0x5b83ef, //设置材质颜色
      transparent: true, //开启透明
      opacity: 0.5, //设置透明度
    });

    //BoxGeometry：长方体
    const geometrybox = new THREE.BoxGeometry(50, 50, 50);
    const meshbox = new THREE.Mesh(geometrybox, material);
    scene.add(meshbox);

    // SphereGeometry：球体
    const geometrysph = new THREE.SphereGeometry(25);
    const meshsph = new THREE.Mesh(geometrysph, material);
    meshsph.translateX(60);
    scene.add(meshsph);

    // CylinderGeometry：圆柱
    const geometrycyl = new THREE.CylinderGeometry(20, 20, 50);
    const matercyl = new THREE.MeshPhongMaterial({
      color: 0xb2da00,
      shininess: 20, //高光部分的亮度，默认30
      specular: 0x444444, //高光部分的颜色
    });
    const meshcyl = new THREE.Mesh(geometrycyl, matercyl);
    meshcyl.translateZ(60);
    scene.add(meshcyl);

    // PlaneGeometry：矩形平面
    const geometrypl = new THREE.PlaneGeometry(50, 50);
    const materialypl = new THREE.MeshLambertMaterial({
      color: 0xda0045,
      side: THREE.DoubleSide,
    });
    const meshypl = new THREE.Mesh(geometrypl, materialypl);
    meshypl.translateX(120);
    scene.add(meshypl);
    // CircleGeometry：圆形平面
    const geometrycir = new THREE.CircleGeometry(20);
    const materialcir = new THREE.MeshPhongMaterial({
      color: 0xff0000,
      shininess: 20, //高光部分的亮度，默认30
      specular: 0x444444, //高光部分的颜色
      side: THREE.DoubleSide,
    });
    const meshcir = new THREE.Mesh(geometrycir, materialcir);
    meshcir.position.set(60, 0, 60);
    // console.log('Math.PI', Math.PI);
    scene.add(meshcir);
    //聚光灯
    var spotLight = new THREE.SpotLight(0xffffff, 1, 0, Math.PI / 6);
    spotLight.position.set(0, 100, 60); //设置聚光灯的位置
    var spotLightTarget = new THREE.Object3D(); //创建一个对象作为聚光灯的目标
    spotLightTarget.position.set(0, 0, 60); //设置目标位置
    scene.add(spotLightTarget); //将目标对缘添加到场景中
    spotLight.target = spotLightTarget; //设置聚光灯的目标为目标对象
    scene.add(spotLight); //将聚光灯添加到场景中
    //  跟新聚光灯方向
    spotLight.target.updateMatrixWorld();

    const spotLightHelper = new THREE.SpotLightHelper(spotLight);
    scene.add(spotLightHelper);

    // 环境光
    const light = new THREE.AmbientLight(0xffffffff, 1);
    scene.add(light);
    const helpers = new THREE.AxesHelper(120);
    scene.add(helpers);

    function renderFun() {
      // console.log('asdfasdf');

      render.render(scene, camera);
      requestAnimationFrame(renderFun);
    }
    renderFun();
  }
</script>
